<template>
  <!-- 搜索工作栏 -->
  <div class="header">
    <div class="search-tools">
      <SearchBar
        ref="formParams"
        :search-config="searchConfig"
        label-width="100px"
        label-position="right"
        style="margin: 0 0 15px 0"
        @transferSearchParams="transferSearchParams"
        @search="handleSearch"
        @resetSearch="resetSearch"
      >
        <el-button slot="inner" size="small" type="primary" @click="handleAdd">新建</el-button>
        <el-button v-if="tableData.length > 0" slot="inner" size="small" type="primary" @click="handleSort">排序</el-button>
      </SearchBar>
    </div>

    <Table
      ref="tableList"
      :table-config="resultClassifiyConfig"
      :table-data="tableData"
      :total="total"
      :page-no="pageNo"
      :page-size="pageSize"
      @sortChange="sortChange"
      @handleSelectionChange="handleSelectionChange"
      @handleChangePage="handleChangePage"
    >

      <el-table-column label="发布状态" align="center" width="160">
        <template slot-scope="scope">
          {{ scope.row.status === '1' ? '发布' : '不发布' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="160">
        <template slot-scope="scope">
          <div class="btn-box">
            <span v-if="scope.row.status === '1'" class="btns" @click="handleOperatePush(scope.row, '0')">不发布</span>
            <span v-if="scope.row.status === '0'" class="btns" @click="handleOperatePush(scope.row, '1')">发布</span>
            <span v-if="noDeleteTypes.indexOf(scope.row.name) === -1" class="btns" @click="handleEdit(scope.row)">编辑</span>
            <span v-if="noDeleteTypes.indexOf(scope.row.name) === -1" class="btns delete" @click="handleDelete(scope.row)">删除</span>
          </div>
        </template>
      </el-table-column>
    </Table>
    <ViewNews ref="viewNews" />
    <DragSort ref="dragSort" @success="handleSearch" />
    <AddMsgTypePop ref="addMsgTypePop" :no-delete-types="noDeleteTypes" @success="handleSearch" />
  </div>
</template>
<script>
import { getMsgTypeList, deleteMsg, updateType } from '@/api/inner-msg/index.js'
import { middleSearchConfig, resultClassifiyConfig } from './initData'
import SearchBar from '@/views/components/SearchBar'
import Table from '@/views/components/Table'
import ViewNews from './components/viewNews.vue'
import { formatDate } from '@/utils/index.js'
import DragSort from './components/dragSort.vue'
import AddMsgTypePop from './components/addMsgTypePop.vue'

export default {
  name: 'NewsList',
  components: {
    SearchBar,
    Table,
    ViewNews,
    DragSort,
    AddMsgTypePop
  },
  data() {
    return {
      searchConfig: middleSearchConfig,
      resultClassifiyConfig,
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      tableSelectList: [],
      sortable: null,
      searchParams: {},
      sortingFields: null,
      noDeleteTypes: ['系统通知', '实习招聘', '实践项目', '留言板', '其他']
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    // this.dragSort();
  },
  methods: {
    resetSearch() {
      this.searchParams = {}
      this.sortingFields = null
      this.$refs.tableList && this.$refs.tableList.$children[0].clearSort()
      this.handleSearch()
    },
    async handleSort() {
      const { code, data } = await getMsgTypeList({
        pageNo: 1,
        pageSize: 999
      })
      if (code === 0) {
        this.$refs.dragSort && this.$refs.dragSort.open({
          list: data.list
        })
      }
    },
    transferSearchParams(params) {
      this.searchParams = params
    },
    handleSearch() {
      this.pageNo = 1
      this.getList()
    },
    async getList() {
      const params = {}
      for (const key in this.searchParams) {
        if (this.searchParams[key] || this.searchParams[key] === 0) {
          params[key] = this.searchParams[key]
        }
      }
      const { code, data } = await getMsgTypeList({
        ...params,
        sortingFields: this.sortingFields,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      })
      if (code === 0) {
        this.tableData = data.list.map(v => {
          return {
            ...v,
            createTimeStr: formatDate(v.createTime),
            publishTimeStr: formatDate(v.publishTime),
            updateTimeStr: formatDate(v.updateTime),
            statusName: v.status === '1' ? '已发布' : '未发布',
            num: v.num ? v.num : 0
          }
        })
        this.total = data.total
      } else {
        this.tableData = []
        this.total = []
      }
    },
    handleSelectionChange(val) {
      this.tableSelectList = val
    },
    handleChangePage({ pageNo, pageSize }) {
      this.pageNo = pageNo
      this.pageSize = pageSize
      this.getList()
    },
    // 新建
    handleAdd() {
      this.$refs.addMsgTypePop && this.$refs.addMsgTypePop.open({ popType: 'add' })
    },
    // 不发布
    // 暂停发布
    async handleOperatePush(row, status) {
      const mark = status === '0' ? '下架' : '上架'
      this.$confirm(`是否确认${mark}?`, '提示').then(async() => {
        const { code } = await updateType({
          id: row.id,
          status
        })
        if (code !== 0) return
        this.$message.success('操作成功')
        this.getList()
      })
    },

    handleEdit(row) {
      this.$refs.addMsgTypePop && this.$refs.addMsgTypePop.open({ popType: 'edit', row: JSON.stringify(row) })
    },
    handleDelete({ id }) {
      this.$confirm('是否确认删除?', '提示').then(async() => {
        const { code, msg } = await deleteMsg({
          id
        })
        if (code !== 0) {
          this.$message.error(msg)
          return
        }
        this.$message.success('删除成功')
        this.handleSearch()
      })
    },
    confirmDelete() {
      this.$message.success('删除成功')
    },
    sortChange(sortingFields) {
      this.sortingFields = sortingFields
      this.handleSearch()
    }
  }
}
</script>

<style lang='scss' scoped>
    .header {
        display: flex;
        flex-direction: column;
        padding: 0 20px;

        .search-tools {
            display: flex;
            justify-content: space-between;
        }

        .btn-box {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .btns {
                color: #02A7F0;
                cursor: pointer;
                display: inline-block;
                width: 33.33%
            }
            .delete {
                color: #f56c6c;
            }
        }
    }
</style>
